import getState from "@/api/state";
import HorizontalBarChart from "@/template/HorizontalBarChart/HorizontalBarChart";

import React from "react";
import { useEffect } from "react";
import { useState } from "react";

const Base1 = ({ condition }) => {
    const [message, setMessage] = useState("暂无数据");
    const [loading, setLoading] = useState(true);
    const [state, setState] = useState([
        // {
        //     name: "全险种",
        //     data: [
        //         {
        //             name: "20岁以下",
        //             value: '0%',
        //             statValue: 0
        //         }
        //     ]
        // },
    ])

    useEffect(() => {
        getState({
            apiUrl: "/cifgp-core-api/baseQuery/pieChart",
            state,
            condition: {
                ...condition,
                cType: "baseAge"
            },
            setState,
            setLoading,
            setMessage,
            nameList: ["未知", "10岁及以下", "11-20岁", "21-30岁", "31-40岁", "41-50岁", "51-60岁", "60岁及以上"]

        })
    }, [condition])


    return (
        <>

            <HorizontalBarChart
                message={message}
                loading={loading}
                sort={"up"}
                style={{ width: "25%", height: "420px" }}
                title="客户年龄分布"
                btn={state.map(item => item.name)}
                data={state}
                fieldNames={{
                    name: "年龄客户量",
                    value: "个"
                }}
            />


        </>
    )
}
export default Base1;